<template>
    <div class="table">
      
        <div class="container">
            <div>
                <el-button type="warning" size="medium"  class="handle-del mr10" @click="add">新增</el-button>
                <el-button type="primary"  size="medium"  class="handle-del mr10" @click="query">查询</el-button>
            </div>
            <el-row class="input-suffix">
                <el-col :span="12">
                    公司编码&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-input clearable v-model="companyCoding" size="medium" placeholder="请输入公司编码" prefix-icon="el-icon-search" class="handle-input mr10"></el-input>
                </el-col>
                <el-col :span="12">
                    公司名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <el-input clearable v-model="companyName" size="medium" placeholder="请输入公司名称" prefix-icon="el-icon-search" class="handle-input mr10" ></el-input>
                </el-col>
            </el-row>

            <el-table :data="companyTableListData" border class="table" ref="multipleTable" @selection-change="handleSelectionChange" 
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.8)">
                <el-table-column   prop="companyCode" label="公司编码" align="center"  width="auto">
                </el-table-column>
                <el-table-column prop="desShort" label="公司名称"  align="center" width="auto">
                </el-table-column>
                <el-table-column prop="companyStatus" label="状态" align="center" width="auto" :formatter="statusformat">
                </el-table-column>
                <el-table-column label="操作" width="auto" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" size="mini" class="blue"  @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                        <el-button type="text" size="mini" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template> 
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background 
                layout="total,prev, pager, next" 
                :page-size="pageSize"
                :total="totallRows"
                :current-page="currentPageNo"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                @prev-click="getLastPageData"
                @next-click="getNextPageData">
                </el-pagination>
            </div>
        </div>
                     
        <!-- 新增弹出框 -->
        <el-dialog title="单位信息" :visible.sync="addVisible" width="70%">
            <el-form ref="form" :model="addForm" label-width="180px">
                <el-row>
                 <el-col :span="12">
                    <el-form-item label="*公司编码" class="redItem">
                        <el-input :disabled="disabled" clearable v-model="addForm.companyCode" placeholder="请输入公司编码" type="text" size="medium" ></el-input>
                    </el-form-item>
                 </el-col>
                 <el-col :span="12">
                <el-form-item label="*公司名称" class="redItem">
                    <el-input clearable :disabled="disabled" v-model="addForm.description" placeholder="请输入公司名称" size="medium"></el-input>
                </el-form-item>
                 </el-col>
                </el-row>
                <el-row>
                 <el-col :span="12">
                <el-form-item label="*公司简称" class="redItem">
                    <el-input clearable :disabled="disabled" v-model="addForm.desShort" placeholder="请输入公司简称" size="medium"></el-input>
                </el-form-item>
                 </el-col>
                 <el-col :span="12">
                <el-form-item label="状态">
                    <el-select  v-model="addForm.companyStatus" placeholder="请选择">
                        <el-option  key="1" label="启用" value="1" ></el-option>
                        <el-option  key="0" label="停用" value="0" ></el-option>
                    </el-select>
                </el-form-item>
                 </el-col>
                </el-row>
                <el-row>
                 <el-col :span="12">
                <el-form-item label="类型">
                    <el-select  v-model="addForm.companyType" placeholder="请选择">
                      <el-option  key="0" label="有限责任公司" value="0" ></el-option>
                      <el-option  key="1" label="股份有限公司" value="1" ></el-option>
                      <el-option  key="2" label="国有企业" value="2" ></el-option>
                    </el-select>
                </el-form-item>
                 </el-col>
                 <el-col :span="12">
                <el-form-item label="组织机构">
                    <el-select  v-model="addForm.eosCode" placeholder="请选择">
                        <el-option  key="0" label="组织架构1" value="0" ></el-option>
                        <el-option  key="1" label="组织架构2" value="1" ></el-option>
                        <el-option  key="2" label="组织架构3" value="2" ></el-option>
                    </el-select> 
                </el-form-item>
                </el-col>
                </el-row>
                <el-row>
                 <el-col :span="12">
                <el-form-item label="地址"> 
                <el-input clearable v-model="addForm.companyAds" placeholder="请输入地址信息" type="textarea" size="medium"></el-input>
                </el-form-item>
                 </el-col>
                 <el-col :span="12">
                <el-form-item label="电话">
                <el-input clearable v-model="addForm.companyTel" placeholder="请输入电话号码" type="number" size="medium"></el-input>
                </el-form-item>
                 </el-col>
                </el-row>
                <el-row>
                 <el-col :span="12">
                <el-form-item label="传真">
                <el-input clearable v-model="addForm.companyFax" placeholder="请输入传真" size="medium"></el-input>
                </el-form-item>
                 </el-col>
                 <el-col :span="12">
                <el-form-item label="注册资本">
                <el-input clearable v-model="addForm.companyCoptital" placeholder="请输入注册资本" size="medium"></el-input>
                </el-form-item>
                 </el-col>
                </el-row>
                <el-row>
                 <el-col :span="12">
                <el-form-item label="纳税人登记号">
                <el-input clearable v-model="addForm.companyPayer" placeholder="请输入纳税人登记号" size="medium"></el-input>
                </el-form-item>
                 </el-col>
                 <el-col :span="12">
                <el-form-item label="开户行名称">
                <el-input clearable v-model="addForm.companyBankname" placeholder="请输入开户行名称" size="medium"></el-input>
                </el-form-item>
                 </el-col>
                </el-row>
                <el-row>
                 <el-col :span="12">
                <el-form-item label="开户行账号">
                <el-input clearable v-model="addForm.companyBankno" placeholder="请输入开户行账号" type="number" size="medium"></el-input>
                </el-form-item>
                 </el-col>
                 <el-col :span="12">
                <el-form-item label="备注">
                <el-input clearable v-model="addForm.companyNote" placeholder="请输入备注信息" type="textarea" size="medium"></el-input>
                </el-form-item>
                 </el-col>
                </el-row>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit" :plain="true">确 定</el-button>
            </span>
        </el-dialog> 

       <!-- 删除提示框 -->
        <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { queryCompanyMsg_Url, delCompanyMsg_Url,
        changeCompanyMsg_Url } from "@/config/api";
import { stringify } from 'querystring';
    export default {
        name: 'companyQuery',
        data() {
            return {
                loading:true,
                disabled:false,
                status:'',
                companyCoding:'',
                companyId:'',
                companyName:'',
                projectId:'',
                totallRows:0,    /* 总数据行数 */
                pageSize:10,    /* 当前页数据显示条数 */
                currentPageNo:1,   /* 当前页码 */
                addForm:{   /* 新增弹框 */
                    companyCode:'', /* 公司编码 */
                    description:'',/* 公司名称 */
                    companyId:'',/**公司id */
                    desShort:'',  /* 公司简介 */   
                    companyType:'',/* 公司类型 */
                    companyStatus:'',/* 公司状态 */
                    eosCode:'',/* 组织机构code */
                    projectId:'',/* 所属工程 */
                    companyAds:'',/* 公司地址 */
                    companyTel:'',/* 公司电话 */
                    companyFax:'',/* 公司传真 */
                    companyPayer:'',/* 公司纳税人登记号 */
                    companyCoptital:'',/* 公司注册资本 */
                    companyBankname:'',/* 开户行名称 */
                    companyBankno:'',/* 开户行账号 */
                    companyNote:''/* 备注 */
                },
                companyTableListData:[/* 表格数据 */ ],  
                multipleSelection: [],
                editVisible: false,
                addVisible:false,
                delVisible: false,
                idx: -1
            }
        },
        created() {
            this.getData();
        },
        computed: {
            data() {

            }
        },
        methods: {
            // 分页导航
            handleCurrentChange(val) {
                this.currentPageNo = val;
                this.getData();
            },
             statusformat(row,column){
                if (row.companyStatus === 0) {
                return '停用'
                } else if (row.companyStatus === 1) {
                return '启用'
                }
            },
            // 页面加载数据
            getData() {
                /* 测试数据 */
                this.loading=true;
                queryCompanyMsg_Url({
                  companyCode:this.companyCoding,
                  companyName:this.companyName,
                  projectId:this.projectId,
                  pageNo:this.currentPageNo
               }).then(res =>{
                    // console.log("分页查询公司数据======>>>"+JSON.stringify(res.data));
                    this.companyTableListData = res.data.records;
                    this.totallRows = res.data.rowCount;
                    this.currentPageNo = res.data.pageNow;
                    this.loading = false;
               })
            },
            /* 查询事件 */
            query() {
               this.getData();
            },
            /* 添加事件 */ 
            add(){
                    this.disabled=false,
                    this.status=0,
                    this.addVisible = true
                    this.addForm.companyCode='',
                    this.addForm.description='',
                    this.addForm.desShort='',      
                    this.addForm.companyType='',
                    this.addForm.companyStatus='',
                    this.addForm.eosCode='',
                    this.addForm.projectId='',
                    this.addForm.companyAds='',
                    this.addForm.companyTel='',
                    this.addForm.companyFax='',
                    this.addForm.companyPayer='',
                    this.addForm.companyCoptital='',
                    this.addForm.companyBankname='',
                    this.addForm.companyBankno='',
                    this.addForm.companyNote=''
            },
            /* 确定添加事件 */
            submit(){
                if(this.status===0){/* 新增 */
                if( this.addForm.companyCode==''|| this.addForm.companyCode==null
                ||this.addForm.description==''||this.addForm.description==null
                ||this.addForm.desShort==''||this.addForm.desShort==null){
                    this.$message.error(' * 标注为必填内容!!!');
                    return false;
                }else{
                    changeCompanyMsg_Url(
                    this.addForm
                ).then(res =>{
                    //  console.log("测试添加公司数据后返回的状态值======>>>"+JSON.stringify(res.data));
                    if(res.data.data==true){
                             this.$message.success(' 恭喜你，数据添加成功！！！');
                             this.getData();
                             this.addVisible = false;
                        }else{
                            this.$message.error(res.data.msg);
                            this.addVisible = false;
                            return false;
                        }
                })
                }
                 }else{/* 修改 */
                    changeCompanyMsg_Url(
                        this.addForm
                    ).then( res =>{
                        // console.log("测试修改公司数据后返回的状态值======>>>"+JSON.stringify(res.data));
                        if(res.data.success)
                        {
                            this.addVisible = false;
                            this.getData();
                            this.$message.success(`修改第 ${this.idx+1} 行成功`);
                        }else {
                            this.$message.error(`修改第 ${this.idx+1} 行失败`);
                            this.getData();
                        }
                    })
                 }
            },
            /* 点击修改事件 */
            handleEdit(index, row) {
                this.status =1;
                this.disabled=true;
                this.addVisible = true;
                this.idx = index;
                this.addForm = this.companyTableListData[index];
            },
            /* 删除事件 */
            handleDelete(index, row) {
                this.idx = index;
                this.delVisible = true;
            },
            /* 当选择项发生改变时触发该事件 */
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            /* pageSize发生改变的事件 */
            handleSizeChange(){

            },
            /* 上一页点击事件 */
            getLastPageData(){

            },
            /* 下一页点击事件 */
            getNextPageData(){

            },
            /* 确定删除事件 */
            deleteRow(){
                delCompanyMsg_Url({
                    companyId:this.companyTableListData[this.idx].companyId
                }).then(res =>{
                    // console.log("删除的节点信息====>>>>" + this.companyTableListData[this.idx].companyId);
                    // console.log("删除公司返回之后的状态======>>>"+JSON.stringify(res.data))
                    if(res.data.success)
                    {
                        this.$message.success('删除成功');
                        this.getData();
                    }else
                    {
                        this.$message.error('删除失败');
                    }
                    this.delVisible = false;
                })
            },
            /*修改取消事件（此处保证弹框输入框的值不会传入表格之中）*/
            cancel(){
                if(this.status===1){
                    this.getData();
                    this.addVisible = false
                }else {
                    this.addVisible = false
                }
            }
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{    
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .mr10{
        margin-right: 10px;
    }
    .input-suffix{
        margin: 20px;
    }
    .label{
        margin-right:50px; 
    }
</style>
